<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>旗木宠物后台系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style>


        .profile-container {
            float: left;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(20%);
            width: 800px;
            border: 1px solid #ccc;
            padding-bottom: 40px;
            background-color: white;
            border-radius: 10px;
        }

        .profile-image {
            padding-right: 50px;
            float: left;
            margin-top: 40px;
            margin-left: 40px;
            width: 300px;
            height: 300px;
            border-right: 1px solid #ccc;
        }

        .profile-image img {
            width: 200px;
            margin-top: 40px;
            margin-left: 40px;
            border-radius: 5px;
            border: 1px solid black;
        }

        .profile-info {
            float: left;
            text-align: left;
            margin-top: 50px;
        }

        .nickname {
            font-weight: bold;
            font-size: 1.2em;
            margin-left: 120px;
            margin-top: 40px;
        }

        .account,
        .permission {
            font-size: 0.9em;
            color: #666;
            margin-left: 120px;
            margin-top: 40px;
        }
    </style>
</head>
<body>

<div class=" layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-green">
        <!-- 头部区域 -->
        <div class="layui-logo layui-hide-xs layui-bg-green"><i>旗木宠物后台管理系统</i></div>
        <ul class="layui-nav layui-bg-green layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="" class="layui-nav-img admin-img" style="width: 40px;height: 40px;">
                    <span class="admin-name"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a onclick="showHide('.admin')" href="javascript:;">个人中心</a></dd>
                    <dd><a href="javascript:;" id="exit">注销</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-green">
        <div class="layui-side-scroll layui-bg-green">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-bg-green layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-this"><a onclick="showHide('.admin')" href="javascript:;">个人中心</a></li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a onclick="showHide('.user-manage')" href="javascript:;">普通用户管理</a></dd>
                        <dd><a onclick="showHide('.store-manage')" href="javascript:;">商店管理</a></dd>
                        <dd><a onclick="showHide('.admin-manage')" href="javascript:;">管理员</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">商品管理</a>
                    <dl class="layui-nav-child">
                        <dd><a onclick="showHide('.commodity-manage')" href="javascript:;">商品</a></dd>
                        <dd><a onclick="showHide('.comment-manage')" href="javascript:;">商品评价</a></dd>
                        <dd><a onclick="showHide('.answerProblem-manage')" href="javascript:;">商品问答</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a onclick="showHide('.orderInfo-manage')" href="javascript:;">订单管理</a></li>
                <li class="layui-nav-item"><a onclick="showHide('.concern-manage')" href="javascript:;">关注管理</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-card layui-panel">
                <div class="layui-card-body">
                    <!-- 个人中心 -->
                    <div class="admin">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>个人中心</h4>
                        </blockquote>
                        <div class="profile-container">
                            <div class="profile-image">
                                <img src="" class="admin-img" alt="Profile Avatar">
                            </div>
                            <div class="profile-info">
                                <h2 class="nickname"></h2>
                                <p class="account">账户: john_doe123</p>
                                <p class="permission">权限: 管理员</p>
                            </div>
                        </div>
                    </div>
                    <!-- 普通用户管理 -->
                    <div class="user-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>普通用户列表</h4>
                        </blockquote>
                        <script type="text/html" id="userbar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="usertoolbar">
                            <button type="button" style="margin-top: 0px;margin-bottom: 5px" class="layui-btn">添加用户
                            </button>
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="username" placeholder="用户查询" id="userfindtext"
                                               class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="user-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-user-search" lay-filter="userTable"></table>
                    </div>
                    <!-- 商店管理 -->
                    <div class="store-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>商店列表</h4>
                        </blockquote>
                        <script type="text/html" id="storebar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="storetoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="storename" placeholder="商店查询" id="storefindtext"
                                               class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="store-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-store-search" lay-filter="storeTable"></table>
                    </div>

                    <!-- 管理员管理 -->
                    <div class="admin-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>管理员列表</h4>
                        </blockquote>
                        <script type="text/html" id="adminbar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="admintoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="adminname" placeholder="管理员查询" id="adminfindtext"
                                               class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="admin-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-admin-search" lay-filter="adminTable"></table>
                    </div>

                    <!-- 商品管理 -->
                    <div class="commodity-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>商品列表</h4>
                        </blockquote>
                        <script type="text/html" id="commoditybar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="commoditytoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="commodityname" placeholder="商品查询"
                                               id="commodityfindtext" class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="commodity-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-commodity-search" lay-filter="commodityTable"></table>
                    </div>
                    <!-- 商品评价管理 -->
                    <div class="comment-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>商品评价列表</h4>
                        </blockquote>
                        <script type="text/html" id="commentbar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="commenttoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="commentname" placeholder="商品评价查询"
                                               id="commentfindtext" class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="comment-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-comment-search" lay-filter="commentTable"></table>
                    </div>
                    <!-- 商品问答管理 -->
                    <div class="answerProblem-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>商品问答列表</h4>
                        </blockquote>
                        <script type="text/html" id="answerProblembar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="answerProblemtoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="answerProblemname" placeholder="商品问答查询"
                                               id="answerProblemfindtext" class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="answerProblem-table-search">查询
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-answerProblem-search" lay-filter="answerProblemTable"></table>
                    </div>
                    <!-- 订单管理 -->
                    <div class="orderInfo-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>订单列表</h4>
                        </blockquote>
                        <script type="text/html" id="orderInfobar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="orderInfotoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="orderInfoname" placeholder="订单查询"
                                               id="orderInfoIdFindtext" class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="orderInfo-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-orderInfo-search" lay-filter="orderInfoTable"></table>
                    </div>
                    <!-- 关注管理 -->
                    <div class="concern-manage" style="display: none">
                        <blockquote class="layui-elem-quote layui-text">
                            <h4>订单列表</h4>
                        </blockquote>
                        <script type="text/html" id="concernbar">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">保存</a>
                        </script>
                        <script type="text/html" id="concerntoolbar">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-col-md4">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-username"></i>
                                        </div>
                                        <input type="text" name="concernname" placeholder="用户关注查询"
                                               id="concernFindtext" class="layui-input"
                                               lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-btn-container">
                                    <button class="layui-btn" lay-submit lay-filter="concern-table-search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>

                                    <button class="layui-btn" lay-submit lay-filter="concern-table-commodity">关注的商品</button>
                                    <button class="layui-btn" lay-submit lay-filter="concern-table-store">关注的商店</button>
                                </div>
                            </form>
                        </script>
                        <table class="layui-hide" id="ID-concern-search" lay-filter="concernTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer layui-bg-gray">
        <!-- 底部固定区域 -->
        <i>旗木宠物后台管理系统</i>
        <i id="dateTime" style="float: right;"></i>
    </div>
</div>
</body>
</html>
<script>
    function updateDateTime() {
        var now = new Date();
        var dateTime = now.toLocaleString();
        $('#dateTime').text(dateTime);
    }

    $("#exit").click(function () {
        $.ajax({
            type: "Get",
            url: "/patMall/user/exit",
            success: function (res) {
                if (res == "success") {
                    localStorage.removeItem("adminJson");
                    window.location.href = "/patMall/admin/login.jsp";
                }
            }
        })
    })
    setInterval(updateDateTime, 1000);
    window.onload = function() {
        let admin = localStorage.getItem("adminJson");
        admin = eval('(' + admin + ')');
        adminShow(admin);
    }
    function adminShow(admin){
        if (admin.headImg != null) {
            $('.admin-img').attr("src", "../../" + admin.headImg);
        }else{
            $('.admin-img').attr("src", "../images/a1.jpg");
        }
        $('.admin-name').text(admin.nickName);
        $('.nickname').text("昵称："+admin.nickName);
        $('.account').text("账户："+admin.username);
        let power = "管理员";
        if (admin.userRole == 1){
            power = '管理员';
        }
        if (admin.userRole == 2){
            power = '超级管理员';
        }
        $('.permission').text("权限："+power);
    }
    function showHide(el) {
        // 隐藏所有元素，除了传入的元素
        $(".user-manage, .store-manage, .admin, .admin-manage, .commodity-manage,.comment-manage,.answerProblem-manage,.orderInfo-manage,.concern-manage,.concern-manage").not(el).hide(100);

        // 显示传入的元素
        $(el).show();
    }
</script>
<%-- 用户管理 --%>
<%-- 普通用户 --%>
<script>
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-user-search',
            url: '/patMall/user/findAllUser',
            method: 'post',
            toolbar: '#usertoolbar',
            title: '用户列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            where: {
                role: 0
            },
            cols: [[
                {field: 'userId', title: 'ID', width: 80, unresize: true, sort: true, fixed: true, align: 'center'},
                {field: 'username', title: '用户名', width: 120, unresize: true, edit: "text", align: 'center'},
                {field: 'userPwd', title: '密码', width: 120, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'headImg',
                    title: '头像',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.headImg != null) {
                            return '<img src="../../' + data.headImg + '" style="width: 30px; height: 30px;">';
                        } else {
                            return "未设置";
                        }
                    }
                },
                {field: 'nickName', title: '昵称', width: 120, unresize: true, edit: "text", align: 'center'},
                {field: 'phone', title: '电话', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'realName', title: '真实姓名', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'idCard', title: '身份证号码', width: 150, unresize: true, align: 'center', edit: "text"},
                {field: 'registerTime', title: '注册时间', width: 120, unresize: true, align: 'center'},
                {field: 'userStore', title: '注册的商店', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'userRole', title: '权限', width: 120, unresize: true, align: 'center', edit: "text"},
                {title: '操作', width: 135, unresize: true, align: 'center', toolbar: '#userbar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.userId + '</br>账号：' + data.username + '</br>密码：' + data.userPwd + '</br>昵称：' + data.nickName, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.userId) + '”的用户修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/user/updateName",
                            data: {
                                userId: data.userId,
                                userName: data.userName,
                                userPwd: data.userPwd,
                                nickName: data.nickName,
                                phone: data.phone,
                                realName: data.realName,
                                idCard: data.idCard,
                                userState: data.userState,
                                userRole: data.userRole
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('用户名已存在，修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(user-table-search)', function (data) {
            var user_name = $('#userfindtext').val();
            table.reload('ID-user-search', {
                url: '/patMall/user/findUserInfosByName',
                method: "POST",
                where: {
                    username: user_name,
                    role: 0
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>

<%-- 商店管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-store-search',
            url: '/patMall/store/findAllStore',
            method: 'post',
            toolbar: '#storetoolbar',
            title: '商店列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            where: {
                role: 0
            },
            cols: [[
                {field: 'storeId', title: 'ID', width: 100, unresize: true, sort: true, fixed: true, align: 'center'},
                // { field: 'username', title: '用户名', width: 120, unresize: true, edit: "text", align: 'center'},
                // { field: 'phone', title: '电话', width: 120, unresize: true, align: 'center'},
                // { field: 'realName', title: '真实姓名', width: 120, unresize: true, align: 'center' },
                // { field: 'idCard', title: '身份证号码', width: 150, unresize: true, align: 'center' },
                {field: 'storeName', title: '商店名称', width: 300, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'storeImg',
                    title: '头像',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.storeImg != null) {
                            return '<img src="../../' + data.storeImg + '" style="width: 80px; height: 30px;">';
                        } else {
                            return "未设置";
                        }
                    }
                },
                {field: 'storeTime', title: '商店注册时间', width: 300, unresize: true, align: 'center'},
                {field: 'storeState', title: '是否开放中', width: 100, unresize: true, edit: "text", align: 'center'},
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#storebar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                // console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(storeTable)', function (obj) {
            const data = obj.data;
            console.log(data);
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.storeId + '</br>商店名称：' + data.storeName + '</br>注册时间：' + data.storeTime + '</br>是否开放：' + data.storeState, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.storeId) + '”的商店修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/store/updateStore",
                            data: {
                                storeId: data.storeId,
                                storeName: data.storeName,
                                storeState: data.storeState
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(store-table-search)', function (data) {
            var store_name = $('#storefindtext').val();
            table.reload('ID-store-search', {
                url: '/patMall/store/findStoreInfosByName',
                method: "POST",
                where: {
                    storeName: store_name
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>

<%-- 管理员 --%>
<script>
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-admin-search',
            url: '/patMall/user/findAllUserByAdmin',
            method: 'post',
            toolbar: '#admintoolbar',
            title: '管理员列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            where: {
                role: 0
            },
            cols: [[
                {field: 'userId', title: 'ID', width: 80, unresize: true, sort: true, fixed: true, align: 'center'},
                {field: 'username', title: '用户名', width: 120, unresize: true, edit: "text", align: 'center'},
                {field: 'userPwd', title: '密码', width: 120, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'headImg',
                    title: '头像',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.headImg != null) {
                            return '<img src="../../' + data.headImg + '" style="width: 30px; height: 30px;">';
                        } else {
                            return "未设置";
                        }
                    }
                },
                {field: 'nickName', title: '昵称', width: 120, unresize: true, edit: "text", align: 'center'},
                {field: 'phone', title: '电话', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'realName', title: '真实姓名', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'idCard', title: '身份证号码', width: 150, unresize: true, align: 'center', edit: "text"},
                {field: 'registerTime', title: '注册时间', width: 120, unresize: true, align: 'center'},
                {field: 'userStore', title: '注册的商店', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'userRole', title: '权限', width: 120, unresize: true, align: 'center', edit: "text"},
                {title: '操作', width: 135, unresize: true, align: 'center', toolbar: '#userbar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        table.on('tool(adminTable)', function (obj) {
            var data = obj.data;
            console.log(data)
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.userId + '</br>账号：' + data.username + '</br>密码：' + data.userPwd + '</br>昵称：' + data.nickName, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.userId) + '”的用户修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/user/updateName",
                            data: {
                                userId: data.userId,
                                userName: data.userName,
                                userPwd: data.userPwd,
                                nickName: data.nickName,
                                phone: data.phone,
                                realName: data.realName,
                                idCard: data.idCard,
                                userState: data.userState,
                                userRole: data.userRole
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('用户名已存在，修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(admin-table-search)', function (data) {
            const user_name = $('#adminfindtext').val();
            table.reload('ID-admin-search', {
                url: '/patMall/user/findUserInfosByAdminName',
                method: "POST",
                where: {
                    username: user_name,
                    role: 0
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>


<%-- 商品管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-commodity-search',
            url: '/patMall/commodity/selectAllCommodity',
            method: 'post',
            toolbar: '#commoditytoolbar',
            title: '商品列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [[
                {
                    field: 'commodityId',
                    title: 'ID',
                    width: 100,
                    unresize: true,
                    sort: true,
                    fixed: true,
                    align: 'center'
                },
                {field: 'commodityName', title: '商品标题', width: 340, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'commodityImg',
                    title: '商品图片',
                    width: 80,
                    unresize: true,
                    align: 'center',
                    edit: "text",
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.commodityImgList[0].commodityImg != null) {
                            return '<img src="../../' + data.commodityImgList[0].commodityImg + '" style="width: 30px; height: 30px;">';
                        } else {
                            return "未设置";
                        }
                    }
                },
                {field: 'commodityBrand', title: '商品品牌', width: 120, unresize: true, align: 'center', edit: "text"},
                {field: 'commodityPrice', title: '商品价格', width: 120, unresize: true, align: 'center', edit: "text"},
                {
                    field: 'commodityStoreId',
                    title: '商店',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        return data.store.storeName;
                    }
                },
                {field: 'commodityDetails', title: '商品详情', width: 200, unresize: true, edit: "text", align: 'center'},
                {field: 'commodityNumber', title: '库存', width: 60, unresize: true, align: 'center', edit: "text"},
                {field: 'commodityTime', title: '商品上架时间', width: 150, unresize: true, align: 'center'},
                {field: 'numberOfViews', title: '浏览次数', width: 100, unresize: true, edit: "text", align: 'center'},
                {field: 'state', title: '是否在售', width: 100, unresize: true, edit: "text", align: 'center'},
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#commoditybar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(commodityTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.commodityId + '</br>商品标题：' + data.commodityName + '</br>上传时间：' + data.storeTime + '</br>是否在售：' + data.state, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.commodityId) + '”的商品修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/commodity/updateCommodity",
                            data: {
                                commodityId: data.commodityId,
                                commodityName: data.commodityName,
                                commodityBrand: data.commodityBrand,
                                commodityPrice: data.commodityPrice,
                                commodityDetails: data.commodityDetails,
                                commodityNumber: data.commodityNumber,
                                state: data.state,
                                numberOfViews: data.numberOfViews
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(commodity-table-search)', function (data) {
            var commodity_name = $('#commodityfindtext').val();
            table.reload('ID-commodity-search', {
                url: '/patMall/commodity/getAllByCommodityName',
                method: "POST",
                where: {
                    commodityName: commodity_name
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>


<%-- 商品评价管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-comment-search',
            url: '/patMall/comment/findAllComment',
            method: 'post',
            toolbar: '#commenttoolbar',
            title: '商品评价列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [[
                {field: 'commentId', title: 'ID', width: 100, unresize: true, sort: true, fixed: true, align: 'center'},
                {field: 'commentContent', title: '商品评价', width: 340, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'commentImg',
                    title: '商品评价图片',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        let html = '';
                        for (let i = 0; i < data.commentImgList.length; i++) {
                            if (data.commentImgList[i].commentImg != null) {
                                html += '<img src="../../' + data.commentImgList[i].commentImg + '" style="width: 30px; height: 30px;">';
                            } else {
                                return "未设置";
                            }
                        }
                        return html;
                    }
                },
                {
                    field: 'userId',
                    title: '评价商品的人',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.userId != null) {
                            return data.user.username;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {
                    field: 'commodityId',
                    title: '商品',
                    width: 250,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.commodityId != null) {
                            return data.commodity.commodityName;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {field: 'commentTime', title: '评价时间', width: 150, unresize: true, align: 'center'},
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#commentbar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                // console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(commentTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.commentId + '</br>评价内容：' + data.commentContent + '</br>评价时间：' + data.commentTime + '</br>是否在售：' + data.state, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.commentId) + '”的商品评价修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/comment/updateComment",
                            data: {
                                commentId: data.commentId,
                                commentContent: data.commentContent
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(comment-table-search)', function (data) {
            var commodity_content = $('#commentfindtext').val();
            table.reload('ID-comment-search', {
                url: '/patMall/comment/getAllByCommentContent',
                method: "POST",
                where: {
                    commentContent: commodity_content
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>

<%-- 商品问答管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-answerProblem-search',
            url: '/patMall/answerProblem/getAllAnswerProblem',
            method: 'post',
            toolbar: '#answerProblemtoolbar',
            title: '商品问答列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [[
                {field: 'answerId', title: 'ID', width: 100, unresize: true, sort: true, fixed: true, align: 'center'},
                {field: 'answerContent', title: '商品问答', width: 340, unresize: true, edit: "text", align: 'center'},
                {
                    field: 'isProblem',
                    title: '商品（问/答）',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.isProblem == 1) {
                            return '问题';
                        } else {
                            return "答案";
                        }
                    }
                },
                {field: 'answerProblemId', title: '回答的ID', width: 50, unresize: true, align: 'center'},
                {
                    field: 'userId',
                    title: '问答的人',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.userId != null) {
                            return data.user.username;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {
                    field: 'commodityId',
                    title: '商品',
                    width: 250,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.commodityId != null) {
                            return data.commodity.commodityName;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {field: 'answerProblemTime', title: '问答时间', width: 150, unresize: true, align: 'center'},
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#answerProblembar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                // console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(answerProblemTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.answerId + '</br>问答内容：' + data.answerContent + '</br>问答上传时间：' + data.answerProblemTime, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.answerId) + '”的商品评价修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/answerProblem/updateAnswerProblem",
                            data: {
                                answerId: data.answerId,
                                answerContent: data.answerContent
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(answerProblem-table-search)', function (data) {
            var answerProblem_content = $('#answerProblemfindtext').val();
            table.reload('ID-answerProblem-search', {
                url: '/patMall/answerProblem/getAllByAnswerContent',
                method: "POST",
                where: {
                    answerContent: answerProblem_content
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>


<%-- 订单管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-orderInfo-search',
            url: '/patMall/order/getAllOrderInfo',
            method: 'post',
            toolbar: '#orderInfotoolbar',
            title: '商品问答列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            cols: [[
                {field: 'orderId', title: 'ID', width: 100, unresize: true, sort: true, fixed: true, align: 'center'},
                {
                    field: 'userId',
                    title: '购买用户名',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.userId != null) {
                            return data.user.username;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {
                    field: 'commodityId',
                    title: '商品',
                    width: 250,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.commodityId != null) {
                            return data.commodity.commodityName;
                        } else {
                            return '未知名';
                        }
                    }
                },

                {
                    field: 'address',
                    title: '地址',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.address != null) {
                            return data.address.name+data.address.phone+data.address.address;
                        } else {
                            return "未知地址";
                        }
                    }
                },
                {field: 'number', title: '购买数量', width: 50, unresize: true, align: 'center'},
                {field: 'paymentMethod', title: '支付方式', width: 100, unresize: true, align: 'center'},
                {field: 'orderTime', title: '订单下单时间', width: 150, unresize: true, align: 'center'},
                {field: 'totalAmount', title: '购买总价', width: 150, unresize: true, align: 'center'},
                {
                    field: 'state',
                    title: '状态',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    edit:"text"
                },
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#orderInfobar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                // console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(orderInfoTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.orderId + '</br>问答内容：' + data.answerContent + '</br>问答上传时间：' + data.answerProblemTime, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.answerId) + '”的订单修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/order/updateOrder",
                            data: {
                                orderId: data.orderId,
                                state: data.state
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(orderInfo-table-search)', function (data) {
            var orderInfo_content = $('#orderInfoIdFindtext').val();
            table.reload('ID-orderInfo-search', {
                url: '/patMall/order/findOrderId',
                method: "POST",
                where: {
                    orderId: orderInfo_content
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>

<%-- 关注管理 --%>
<script>
    var clientHeight = document.documentElement.clientHeight;
    layui.use(['laypage', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        // 创建表格实例
        table.render({
            elem: '#ID-concern-search',
            url: '/patMall/concern/findAllConcern',
            method: 'post',
            toolbar: '#concerntoolbar',
            title: '商品问答列表', // 此处为静态模拟数据，实际使用时需换成真实接口
            where:{
                role:0
            },
            cols: [[
                {field: 'concernId', title: 'ID', width: 100, unresize: true, sort: true, fixed: true, align: 'center'},
                {
                    field: 'userId',
                    title: '购买用户名',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.userId != null) {
                            return data.user.username;
                        } else {
                            return '未知名';
                        }
                    }
                },
                {
                    field: 'commodityId',
                    title: '商品',
                    width: 250,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        if (data.commodityId != null) {
                            return data.commodity.commodityName;
                        } else {
                            return '';
                        }
                    }
                },

                {
                    field: 'storeId',
                    title: '商店',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    templet: function (data) {
                        // 使用图片的URL来显示图片
                        if (data.storeId != null) {
                            return data.store.storeName;
                        } else {
                            return "";
                        }
                    }
                },
                {
                    field: 'state',
                    title: '状态',
                    width: 120,
                    unresize: true,
                    align: 'center',
                    edit:"text"
                },
                {title: '操作', width: 200, unresize: true, align: 'center', toolbar: '#concernbar'}
            ]],
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                , curr: 1 //设定初始在第 1 页
                , groups: 5 //只显示 5 个连续页码
                , first: false //显示首页
                , last: false //显示尾页
                , limits: [5, 15, 20]
            },
            response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res.code, res.msg, res.count, res.data);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data, //解析数据列表
                };
            }
        });
        // 监听工具条   查看  修改
        table.on('tool(concernTable)', function (obj) {
            const data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.concernId + '</br>关注：' + data.commodity.commodityName, {
                    offset: clientHeight / 4,
                    area: '300px;'
                });
            } else if (obj.event === 'edit') {
                layer.alert('确定要对id为“' + JSON.stringify(data.concernId) + '”的关注状态修改进行保存吗？', {
                        icon: 0,
                        offset: clientHeight / 5
                    },
                    function () {
                        $.ajax({
                            type: 'post',
                            url: "/patMall/concern/updateConcern",
                            data: {
                                concernId: data.concernId,
                                state: data.state
                            },
                            success: function (date) {
                                if (date == "success") {
                                    layer.alert('修改成功！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                            location.reload();
                                        }
                                    );
                                } else {
                                    layer.alert('修改失败！', {icon: 0, offset: clientHeight / 5},
                                        function () {
                                            layer.closeAll();
                                        }
                                    );
                                }
                            }
                        });
                    }
                );
            }
        });
        // 搜索提交
        form.on('submit(concern-table-search)', function (data) {
            var concern = $('#concernFindtext').val();
            table.reload('ID-concern-search', {
                url: '/patMall/concern/findConcernUser',
                method: "POST",
                where: {
                    username: concern
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
        // 搜索关注的商品
        form.on('submit(concern-table-commodity)', function (data) {
            table.reload('ID-concern-search', {
                url: '/patMall/concern/findAllConcern',
                method: "POST",
                where: {
                    role: 2
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
        // 搜索关注的商店
        form.on('submit(concern-table-store)', function (data) {
            table.reload('ID-concern-search', {
                url: '/patMall/concern/findAllConcern',
                method: "POST",
                where: {
                    role: 1
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>